<template>
	<!-- 20221121 -->
	<view class="layer-qrcode-cn">

		<!-- 组件内容 -->
		<view class="cn-content">
			<ty-layer-pop-up @overlayClick="close" v-if="show">
				<!-- 浮层内容 -->
				<view class="layer-content bg-ff radius-20 text-center">
					<image class="code" :src="qrCode"></image>
					<view class="margin-top-20 text-32 text-1a">{{text}}</view>
				</view>
			</ty-layer-pop-up>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 浮层是否显示
			show: {
				type: Boolean,
				default: false
			},
			// 二维码路径
			qrCode: {
				type: String,
				default: ''
			},
			// 文本
			text: {
				type: String,
				default: '请向商家出示二维码'
			},
		},
		methods: {
			/**
			 * 关闭浮层
			 * @date 2022-11-21
			 */
			close: function() {
				this.$emit("update:show", false)
			}
		}
	}
</script>

<style scoped>
	/* 浮层内容区域 */
	.layer-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 680rpx;
		padding: 90rpx 0;
	}

	.code {
		width: 500rpx;
		height: 500rpx;
	}
</style>